{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="{% static 'assets/img/apple-icon.png' %}">
    <link rel="icon" type="image/png" href="{% static 'assets/img/favicon.png' %}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Login Page - Now UI Kit by Creative Tim</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
    <!--     Fonts and icons     -->
    
    
    <link href="{% static 'assets/css/bootstrap.min.css' %}" rel="stylesheet" />
    <link href="{% static 'assets/css/now-ui-kit.css' %}" rel="stylesheet" />
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link href="{% static 'assets/css/demo.css' %}" rel="stylesheet" />
    <!-- Canonical SEO -->
    <link rel="canonical" href="" />
    <!--  Social tags      -->
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="{% static 'assets/js/core/jquery.3.2.1.min.js' %}" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        $("#loginbtn").click(function(){

            $.ajax({
                url : "getuserinfo", //后台查询验证的方法
                dataTpye : "json",
                data : {
                    "name" : $('#name').val(),
                    "pwd" : $('#pwd').val()
                },
                type : "post",
                success : function(msg) {
                    //根据后台返回前台的msg给提示信息加HTML
                    if ("true" == msg) {
                        window.location.href="index";
                    } else {
                        alert("账户或密码错误，请重试");
                    }
                },
                error:function(){  //请求失败的回调方法
                    alert("请求失败，请重试");
                }
            });
            });
        });
        </script>
    
</head>

<body class="login-page sidebar-collapse">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent " color-on-scroll="400">
        <div class="container">
            
         
        </div>
    </nav>
    <!-- End Navbar -->
    <div class="page-header" filter-color="orange">
        <div class="page-header-image" style="background-image:url({% static 'assets/img/login.jpg' %})"></div>
        <div class="container">
            <div class="col-md-4 content-center">
                <div class="card card-login card-plain">
                    <form class="form" method="" action="">
                        <div class="header header-primary text-center">
                            <div class="logo-container">
                                <img src="{% static 'assets/img/now-logo.png' %}" alt="">
                            </div>
                        </div>
                        <div class="content">
                            <div class="input-group form-group-no-border input-lg">
                                <span class="input-group-addon">
                                    <i class="now-ui-icons users_circle-08"></i>
                                </span>
                                <input type="text" id="name" class="form-control" placeholder="username...">
                            </div>
                            <div class="input-group form-group-no-border input-lg">
                                <span class="input-group-addon">
                                    <i class="now-ui-icons text_caps-small"></i>
                                </span>
                                <input type="password" id="pwd" placeholder="password..." class="form-control" />
                            </div>
                        </div>
                        <div class="footer text-center">
                            <a href="#pablo" id="loginbtn" class="btn btn-primary btn-round btn-lg btn-block">Get Started</a>
                        </div>
                        <div class="pull-left">
                            <h6>
                                <a href="#pablo" class="link">Create Account</a>
                            </h6>
                        </div>
                        <div class="pull-right">
                            <h6>
                                <a href="#pablo" class="link">Need Help?</a>
                            </h6>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container">
                
                <div class="copyright">
                    &copy;
                    <script>
                        document.write(new Date().getFullYear())
                    </script>, Designed by Invision. Coded by Creative Tim.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
                </div>
            </div>
        </footer>
    </div>
</body>
<!--   Core JS Files   -->

<script src="{% static 'assets/js/core/popper.min.js' %}" type="text/javascript"></script>
<script src="{% static 'assets/js/core/bootstrap.min.js' %}" type="text/javascript"></script>
<script src="{% static 'assets/js/plugins/bootstrap-switch.js' %}"></script>
<script src="{% static 'assets/js/plugins/nouislider.min.js' %}" type="text/javascript"></script>
<script src="{% static 'assets/js/plugins/bootstrap-datepicker.js' %}" type="text/javascript"></script>
<script src="{% static 'assets/js/plugins/jquery.sharrre.js' %}" type="text/javascript"></script>
<script src="{% static 'assets/js/now-ui-kit.js' %}" type="text/javascript"></script>

</html>